<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :xs="12" :md="14" :lg="16" :xl="20">
        <div>
          <el-button @click="returnNMGFn()" :disabled="!isReturnNMG" round>返回自治区地图</el-button>
          <el-button type="success" @click="btnClick('sum')">各盟市汇总表</el-button>
          <el-button type="primary" @click="btnClick('details')">全区明细数据表</el-button>
          <div id="map" style="min-height: 900px"></div>
        </div>
      </el-col>
      <el-col :xs="12" :md="10" :lg="8" :xl="4">
        <div><h5>各盟市(节能/降碳)总量</h5></div>
        <div id="container-bar"></div>
        <div id="container-pie" style="margin-top: 20px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
require('echarts/theme/macarons.js')
import mapData from "../../../public/data/mapData";
import { Bar } from '@antv/g2plot';
import { Pie } from '@antv/g2plot';
const data = [];
export default {
  name: "Demo-NmgMap",
  data() {
    return {
      isReturnNMG: false,   //是否显示返回按钮
      // 为地图做点击事件获取区域数据，地图的数据大家可以在网上去下载自己想要的省市县等区域数据json，然后放到自己项目的静态文件夹里面，
      // 使用require去获取到数据然后使用，这个链接可以去获取全国所有的地图json数据
      // http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
      mapJsonData: require('echarts/map/json/province/neimenggu.json'), ////初始化省级数据
      cities: {
        呼和浩特市: '150100',
        包头市: '150200',
        乌海市: '150300',
        赤峰市: '150400',
        通辽市: '150500',
        鄂尔多斯市: '150600',
        呼伦贝尔市: '150700',
        巴彦淖尔市: '150800',
        乌兰察布市: '150900',
        兴安盟: '152200',
        锡林郭勒盟: '152500',
        阿拉善盟: '152900'
      },
      options: null,    //渲染echarts数据
      renderMapData: [],
      homeData: []
    }
  },
  mounted() {
    this.initData();
    this.$nextTick(()=>{

    });
  },
  methods: {
    //调用后端接口，初始化数据
    initData() {
        this.$axios.get('/api/demo/fgwHomeData').then(res => {
        this.homeData = res.data.data;
        this.renderMapData = mapData;
        this.renderMap('内蒙古');
        this.renderG2Bar();
        this.renderPiePlot();
      }).catch(err => {
      })
    },
    //渲染echarts
    renderMap(name = null) {
      let mapChart = this.$echarts.init(document.getElementById('map'));
      this.$echarts.registerMap('内蒙古',this.mapJsonData);
      name == '内蒙古' ? this.isReturnNMG = false : this.isReturnNMG = true;
      mapChart.off('click')     /// 防止地图点击后多次渲染，导致页面卡顿
      mapChart.on('click',(data) => {
        if(data.data.zoom === 0) {
          this.renderCity(data.data);
        }
        if(data.data.zoom === 2) {
          this.$router.push("/img-video")
          return;
        }
      })
      this.options = {
        title: [{
          text: '全区"双碳"示范应用场景（项目）导览图',
          subtext: '   ',
          left: '35%',
          top: '5%',
          textStyle: {
            color: '#000',
            fontSize: 25
          }
        }],
        tooltip: { // 悬浮框// 鼠标移到图里面的浮动提示框
          trigger: 'item', //数据项图形触发
          // triggerOn: 'click', //这里根据业务需要给点击事件做跳转,所以不能做悬浮了,如果做悬浮 点击不了文字跳转
          formatter: function(params) {
            let toolipData = {}
            let htmlStr = ''
            if (toolipData != null && params.data){ //随机生成的后期根据接口显示
              htmlStr = `<div class="list-wrap">
                        <div class="list-title">${params.data.name}</div>
											<div>项目总数：${params.data.project_count} 个</div>
											<div>节能效果：${params.data.sum_result_jn} 万吨</div>
											<div>降碳效果：${params.data.sum_result_jt} 万吨</div>
											<div>总投资金额：${params.data.ztz} 亿元</div>
											<div>融资需求金额：${params.data.sum_tz_needs} 亿元</div>
										</div>`;
            }
            return htmlStr
          },
        },
        visualMap: { // 左下角展示
          type: 'piecewise',
          show: false,
          min: 100,
          max: 3000,
          left: 'right',
          bottom: 2,
          showLabel: true,
          inRange: {
            color: [
              '#20b2aa',
              '#f5fffa',
              '#3cb371',
              '#00ff7f',
              '#2e8b57',
              '#f0fff0',
              '#90ee90',
              '#98fb98',
              '#00ff00',
            ]
          },
          text: ['',''],
          calculable: true,
          realtime: false,
          splitNumber: 6,
        },
        geo: {
          map: name ? name : "内蒙古",
          roam: false,
          label: { // 页面初始化加载的文字
            normal: {
              show: true,
              textStyle: {
                color: "#000", // 页面初始化的地图文字颜色
                fontSize: 15 // // 页面初始化的地图文字大小
              },
            },
          },
          itemStyle: { //设置样式
            normal: {
              borderWidth: 1.8, //区域边框宽度
              borderColor: 'rgba(0, 146, 255, 1.0)',
              //borderColor: "rgba(39,211,233, 1)",
              shadowColor: '#32cd32',
              shadowBlur: 20,
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 112, 255, 1.0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0040cf' // 100% 处的颜色
                }],
              },
            },
            emphasis: { // 移入背景颜色
              areaColor: '#00eddb',
              //areaColor: '#F9D92E',
              show: true,
              textStyle: {
                color: '#000',
                fontSize: "12px"
              }
            },
          }
        },
        series: [{
          geoIndex: 0,
          type: 'map',
          map: '内蒙古',
          zoom: 1.2,
          top: '10%',
          x: 'center',
          itemStyle: { //地图区域的多边形 图形样式
            normal: { //是图形在默认状态下的样式
              label: {
                show: true, //是否显示标签
                textStyle: {
                  color: "#000"
                }
              }
            },
            zoom: 1.5, //地图缩放比例,默认为1
            emphasis: { //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
              label: {
                show: true
              }
            }
          },
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: {
                color: "#000"
              }, //省份标签字体颜色
            },
            emphasis: {
              show: true,
              textStyle: {}
            }
          },
          // 数据
          data: this.renderMapData
        }],
        // dataRange: {
        // },
      }
      mapChart.setOption(this.options)
      window.addEventListener('resize',()=>{
        mapChart.resize();
      })
    },
    //点击下钻,具体地市
    renderCity(data) {
      console.log(data);
      let that = this;
      if(data.name in that.cities) {
        this.mapJsonData = require(`echarts/map/json/city/nmg/${data.name}.json`);
        //通过data.name获取对应地市下的指标数据  interface......
        let tmpData = import(`../../../public/data/${data.name}.js`);
        let tmpData2 = require(`../../../public/data/${data.name}.js`);
        this.renderMapData = [];
        tmpData2.default.forEach((item)=>{
          this.renderMapData.push(item)
        })
        tmpData.then(res => {
          //this.renderMapData = [];
          res.default.forEach((item,index)=>{
            //this.$set(this.renderMapData,index,item);
          })
        })
        this.renderMap();
      }
    },
    // 返回内蒙古地图
    returnNMGFn() {
      window.location.href = '/';
    },
    btnClick(flag) {
      if(flag === 'details') {
        this.$router.push("/detail")
      } else {
        this.$router.push("/sum-detail")
      }
    },

    //g2图表
    renderG2Bar() {
      const bar = new Bar('container-bar', {
        data: this.homeData,
        xField: 'sum_result_jt',
        yField: 'addr_city',
        seriesField: 'addr_city',
        legend: {
          position: 'top-left',
        },
      });
      bar.render();
    },
    renderPiePlot(){
      const piePlot = new Pie('container-pie', {
        appendPadding: 10,
        data: this.homeData,
        angleField: 'project_count',
        colorField: 'addr_city',
        radius: 1,
        innerRadius: 0.5,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 20,
          },
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            },
            content: '申报项目数',
          },
        },
      });
      piePlot.render();
    }

  }
}
</script>

<style scoped>
.box {
  /*background-color: #E9EEF3;*/
  color: #333333;
  text-align: center;
  padding: 20px;
}
.echartsGroup {
  /**
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;

  width: calc(100% - 600px);
  height: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -450px;
  margin-left: calc((100% - 746px) / -2);
   */
}
/*.echartsGroup .button {*/
/*  position: fixed;*/
/*  top: 80px;*/
/*  left: 560px;*/
/*  border: 1px solid #00ebff;*/
/*  background: #00468C;*/
/*  color: #00ebff;*/
/*  padding: 5px 20px;*/
/*  font-size: 14px;*/
/*  box-shadow: 0 0 10px #00ebff;*/
/*  cursor: pointer;*/
/*  z-index: 4;*/
/*}*/

</style>
